<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .pin {
        width: 200px;
        height: 200px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
    }
    .pin .top {
        width: 100%;
        height: 50%;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
    }
    .pin .top .top1 {
        width: 40%;
        height: 100%;
        border: 1px skyblue solid;
    }
    .pin .bottom {
        width: 100%;
        height: 50%;
        margin-top: 10px;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
    }
    .pin .bottom .b1,.pin .bottom .b2{
        width: 40%;
        height: 100%;
        border: 1px solid deepskyblue;
    }
    .five {
        width: 300px;
        height: 300px;
        margin-top: 20px;
        border: red 1px solid;
        display: flex;
        flex-direction: column;
    }
    .five .one,.two,.three {
        width: 100%;
        height: 33%;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }
    .five .one div,.five .three div,.five .two div {
        width: 0;
        height: 0;
        border: 10px solid black;
        border-radius: 50%;
    }

</style>
<body>

<div class="pin">
    <div class="top">
        <div class="top1"></div>
    </div>
    <div class="bottom">
        <div class="b1"></div>
        <div class="b2"></div>
    </div>
</div>

<div class="five">
    <div class="one">
        <div></div>
        <div></div>
    </div>
    <div class="two">
        <div></div>
    </div>
    <div class="three">
        <div></div>
        <div></div>
    </div>
</div>
</body>
</html>
